<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-听说考试'"> </Breadcrumb>
        <view class="content">
          <view class="box">
            <view class="tips">
              <view class="tips_container">
                <view class="tips_img">
                  <image :src="bookInfo.imageUrl" mode="widthFix"></image>
                </view>
                <view class="tips_content">
                  <view class="tips_title">
                    <text>{{ bookInfo.name }}</text>
                  </view>
                  <view class="tips_introduction">
                    {{ bookInfo.introduction }}
                  </view>
                </view>
              </view>
            </view>
            <view class="section">
              <view class="options">
                <view class="options_content" @click="chapterShow = true">
                  <text>{{ chapterName }}</text>
                  <view class="options_icon">
                    <u-icon
                      name="arrow-down-fill"
                      color="#ffffff"
                      size="24"
                    ></u-icon>
                  </view>
                </view>
                <u-select
                  v-model="chapterShow"
                  :list="chapterList"
                  @confirm="chapterConfirm"
                  value-name="id"
                  label-name="name"
                ></u-select>
              </view>
              <view class="list">
                <view class="item" @click="viewDetails('0')">
                  <view class="item_title"> 全真模拟练习 </view>
                  <view class="item_content" @click.stop="viewReport('0')">
                    <view class="item_text"> 查看报告> </view>
                  </view>
                </view>
                <view class="item" @click="viewDetails('1')">
                  <view class="item_title"> 全真模拟考试 </view>
                  <view class="item_content" @click.stop="viewReport('1')">
                    <view class="item_text"> 查看报告> </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="modal" v-show="isShowPopup">
      <view class="mask"> </view>
      <view class="modal_container">
        <view class="modal_bd">
          <view class="modal_icon">
            <u-icon name="error" color="#ffffff" size="36"></u-icon>
          </view>
          <view class="modal_text"> 你已学完，点击确定将重新开始 </view>
        </view>
        <view class="modal_ft">
          <view class="modal_button" @click="isShowPopup = false">
            <text>取消</text>
          </view>
          <view class="modal_button active" @click="confirm()">
            <text>确定</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { chapterList, findQuestion, elstReset } from "@/api/elst";
export default {
  components: {},
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  data() {
    return {
      id: "",
      bookInfo: {},
      chapterId: "",
      chapterName: "",
      chapterList: [],
      chapterShow: false,
      type: "0",
      isShowPopup: false,
    };
  },
  methods: {
    init() {
      let params = {
        id: this.id,
      };
      chapterList(params).then((res) => {
        this.bookInfo = res.data.book;
        this.chapterList = res.data.chapterList;
        this.chapterId = this.chapterList[0].id;
        this.chapterName = this.chapterList[0].name;
      });
    },
    chapterConfirm(e) {
      if (e[0].value === this.chapterId) return;
      this.chapterId = e[0].value;
      this.chapterName = e[0].label;
    },
    viewDetails(type) {
      this.type = type;
      let params = {
        chapterId: this.chapterId,
        type: this.type,
      };
      findQuestion(params).then((res) => {
        if (res.data.studyFlag) {
          this.isShowPopup = true;
        } else {
          this.jump(type);
        }
      });
    },
    confirm() {
      this.isShowPopup = false;
      let params = {
        chapterId: this.chapterId,
        type: this.type,
      };
      elstReset(params).then((res) => {
        this.jump(this.type);
      });
    },
    jump(type) {
      uni.navigateTo({
        url: `/pages/examination/examinationDetail?chapterId=${this.chapterId}&type=${type}`,
      });
    },
    viewReport(type) {
      uni.navigateTo({
        url: `/pages/examination/examinationReport?chapterId=${this.chapterId}&type=${type}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./examinationList.scss";
</style>
